<template>
    <div>
        <a-page-header
                style="border: 1px solid rgb(235, 237, 240)"
                title="STATS-INFORMATION"
                sub-title="经营统计信息展示"
        />

        <a-row style="margin-top: 10px" type="flex" justify="space-around" align="middle">
            <a-col :span="12">
                <a-card id="procurementInfo" style="width: 100%;height: 300px" :border="false"></a-card>
            </a-col>
            <a-col :span="12">
                <a-card id="outBoundInfo" :border="false" style="width: 100%;height: 300px"></a-card>
            </a-col>
        </a-row>

        <a-row style="margin-top: 20px">
            <a-col :span="24">
                <a-card :border="false" style="width: 100%;height: 500px" id="goodsInfo"></a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import {onMounted,ref} from 'vue'
    import axios from 'axios'
    import * as echarts from 'echarts'

    export default {
        name: "stats-information",
        setup() {
            const goodsList = ref([])
            const procurementInfoList = ref([])
            const outBoundInfoList = ref([])
            const drawProcurementInfo = () => {
                const procurementInfo = echarts.init(document.getElementById('procurementInfo'))
                const procurementInfoX = ref([])
                const procurementInfoY = ref([])
                procurementInfoList.value.forEach(value => {
                    procurementInfoX.value.push(value.name)
                    procurementInfoY.value.push(value.quantity)
                })
                const procurementInfoOption = {
                    title: {
                        text: '过去7天的采购信息'
                    },
                    tooltip: {},
                    legend: {
                        data: ['采购量']
                    },
                    xAxis: {
                        type: 'category',
                        data: procurementInfoX.value
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '采购量',
                            data: procurementInfoY.value,
                            type: 'line',
                            smooth: true
                        }
                    ]
                }
                procurementInfo.setOption(procurementInfoOption);
            }

            const drawOutBoundInfo = () => {
                const outBoundInfo = echarts.init(document.getElementById('outBoundInfo'))
                const outBoundInfoX = ref([])
                const outBoundInfoY = ref([])
                outBoundInfoList.value.forEach(value => {
                    outBoundInfoX.value.push(value.name)
                    outBoundInfoY.value.push(value.quantity)
                })
                const outBoundInfoOption = {
                    title: {
                        text: '过去7天的出库信息'
                    },
                    tooltip: {},
                    legend: {
                        data: ['出库量']
                    },
                    xAxis: {
                        type: 'category',
                        data: outBoundInfoX.value
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '出库量',
                            data: outBoundInfoY.value,
                            type: 'line',
                            smooth: true
                        }
                    ]
                }
                outBoundInfo.setOption(outBoundInfoOption);
            }

            const drawGoodsInfo = () => {
                const goodsInfo = echarts.init(document.getElementById('goodsInfo'))

                const goodsInfoX = ref([])
                const goodsInfoY = ref([])
                goodsList.value.forEach(value => {
                    goodsInfoX.value.push(value.name)
                    goodsInfoY.value.push(value.quantity)
                })
                // 指定图表的配置项和数据
                const goodsInfoOption = {
                    title: {
                        text: '商品库存信息'
                    },
                    tooltip: {},
                    legend: {
                        data: ['库存量']
                    },
                    xAxis: {
                        data: goodsInfoX.value,
                        axisLabel: {
                            rotate: -60
                        }
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '库存量',
                            type: 'bar',
                            data: goodsInfoY.value
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                goodsInfo.setOption(goodsInfoOption);
            }

            const getGoodsInfoData = () =>{
                axios.get('goods/queryAll').then(rs=>{
                    goodsList.value = rs.data.data
                    drawGoodsInfo()
                })
                axios.get('echarts/queryOutBoundByLastSevenDays').then(rs=>{
                    outBoundInfoList.value = rs.data.data
                    drawOutBoundInfo()
                })
                axios.get('echarts/queryProcurementByLastSevenDays').then(rs=>{
                    procurementInfoList.value = rs.data.data
                    drawProcurementInfo()
                })
            }
            onMounted(()=>{
                getGoodsInfoData()
            })
        }
    }
</script>

<style scoped>

</style>